<template>
  <div class="custable">
    <div style="padding:0 .2rem;">
      <div class="second-title">
        {{ secondTitle }}
      </div>
      <div class="tab">
        <div v-for="(item, index) in tabList" :key="item.id" @click="changeActive(index)"
          :class="{ 'tab-item': true, active: isActive === index }">{{ item.name }}</div>
      </div>
      <div class="tableBox">
        <el-table stripe border :data="tableData" max-height="650" :style="{ width: '100%' }"
          :header-cell-style="setStyle1" :cell-style="{ 'text-align': 'center' }">
          <el-table-column v-for="(item, index) in tableHeader" :prop="item.key" :label="item.name" :key="index"
            :width="getWidth(item.name)" :fixed="item.key === 'name' || item.key === 'number'">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div style="height:1px;background:#eee;width:100%;margin-bottom:.3rem;"></div>
    <div style="padding:0 .2rem;">
      <div class="second-title">
        {{ secondTitle1 }}
      </div>
      <div class="tab">
        <div v-for="(item, index) in tabList" :key="item.id" @click="changeActive1(index)"
          :class="{ 'tab-item': true, active: isActive1 === index }">{{ item.name }}</div>
      </div>
      <div class="tableBox1">
        <el-table stripe border :data="tableData1" max-height="650" :style="{ width: '100%' }"
          :header-cell-style="setStyle" :cell-style="{ 'text-align': 'center' }">
          <el-table-column v-for="(item, index) in tableHeader1" :prop="item.key" :label="item.value" :key="index"
            :width="getWidth(item.key, item.value)" :fixed="item.key === 'name' || item.key === 'number'">
            <!--    合并表头      -->
            <template v-if="item.children">
              <el-table-column v-for="(child, i) in item.children" :prop="child.key" :label="child.value" :key="i"
                :width="getChildWidth(child.key, child.value)">
                <!--      自定义合并表头col        -->
                <template slot-scope="scope">
                  <span :style="{ color: showFormat(scope) }">
                    {{ scope.column.label === '同比'
                        || scope.column.label === '占比'
                        ? percentage(scope.row[scope.column.property])
                        : scope.row[scope.column.property]
                    }}
                  </span>
                </template>
              </el-table-column>
            </template>
            <template slot-scope="scope">
              <div>
                <div :style="{ color: showFormat(scope) }">
                  <div v-if="scope.column.label === '名称' || scope.column.label === '门架名称'">
                    <!-- <template v-if="scope.row.name !== '全省-合计'"> -->
                    <template>
                      <div v-if="scope.column.label === '名称'">
                        {{ scope.row.name.replace('收费站', '') }}
                      </div>
                      <div v-else>{{ scope.row.name }}</div>
                    </template>

                  </div>
                  <div v-if="scope.column.label === '排序'">
                    {{ scope.row.rank || scope.$index }}
                  </div>
                  <div v-if="scope.column.label === '时间'">
                    {{ scope.row.dhm }}
                  </div>
                  <div v-if="!['时间', '排序', '名称', '门架名称'].includes(scope.column.label)">
                    {{ scope.column.label ===
                        '同比' ? percentage(scope.row[scope.column.property]) : scope.row[scope.column.property]
                    }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { fd } from '@/utils/request'
import { mapGetters } from 'vuex'

export default {
  name: 'CusTableHeader',
  data() {
    return {
      secondTitle: '直通过境流量统计 (单位:辆)',
      secondTitle1: '跨境流量统计 (单位:辆)',
      tabList: [
        { id: 1, name: '全部车型' },
        { id: 2, name: '货车' },
        { id: 3, name: '客车' }
      ],
      isActive: 0,
      isActive1: 0,
      tableHeader: [
        { key: 'aaa', value: '' },
        { key: 'name', value: '名称' },
        { key: 'num1', value: '今年' },
        { key: 'num2', value: '去年' },
        { key: 'num3', value: '增长率' },
        { key: 'num4', value: '占比' },
        { key: 'num5', value: '今年' },
        { key: 'num6', value: '去年' },
        { key: 'num7', value: '增长率' },
        { key: 'num8', value: '占比' },
        { key: 'num9', value: '今年' },
        { key: 'num10', value: '去年' },
        { key: 'num11', value: '增长率' },
        { key: 'num12', value: '占比' }
      ],
      tableHeader1: [
        { key: 'number', value: '排序' },
        { key: 'name', value: '名称' },
        {
          key: 'name1',
          value: '全省跨境流量',
          children: [
            { key: 'num1', value: '今年' },
            { key: 'qnum1', value: '去年' },
            { key: 'rate1', value: '同比' }
          ]
        },
        {
          key: 'name3',
          value: '直通过境流量',
          children: [
            { key: 'num2', value: '今年' },
            { key: 'qnum2', value: '去年' },
            { key: 'rate2', value: '同比' }
          ]
        },
        {
          key: 'name2',
          value: '省内入外省出',
          children: [
            { key: 'num3', value: '今年' },
            { key: 'qnum3', value: '去年' },
            { key: 'rate3', value: '同比' }
          ]
        },
        {
          key: 'name2',
          value: '外省入省内出',
          children: [
            { key: 'num4', value: '今年' },
            { key: 'qnum4', value: '去年' },
            { key: 'rate4', value: '同比' }
          ]
        },
      ],
      tableData: [],
      tableData1: []
    }
  },
  computed: {
    ...mapGetters(['timeObj', 'firstTableActive', 'firstTableActive1'])
  },
  watch: {
    timeObj: {
      handler(val) {
        let year = new Date(val.startData).getFullYear();
        let curyear = new Date().getFullYear();
        this.tableHeader1.map(item => {
          if (item.children) {
            item.children[0].value = year == curyear ? '今年' : year + '年';
            item.children[1].value = year == curyear ? '去年' : (year - 1) + '年';
          }
        })
        this.requestData();
        this.requestData1();
      },
      deep: true
    },
    'firstTableActive': 'requestData',
    'firstTableActive1': 'requestData1',
    'firstTabId': 'requestData'
  },
  mounted() {
    this.requestData();
    this.requestData1();
  },
  methods: {
    getChildWidth(key, value) {
      // // console.log(key, value)
      // if (this.firstTabId === 3) {
      //   return '55px'
      // } else {
      //   return '65px'
      // }
      if (key === 'name1') {
        return '75px'
      }
      if (value !== '同比' && value !== '占比') {
        return '70px'
      } else {
        return '55px'
      }
    },
    // 判断同比正负颜色不同
    showFormat(scope) {
      if (scope.column.label === '同比') {
        if (parseFloat(scope.row[scope.column.property]) > 0) {
          return '#F92D2D'
        } else if (parseFloat(scope.row[scope.column.property]) < 0) {
          return '#0C9B50'
        }
      }
      return ''
    },
    async requestData() {
      const params = {
        sdhm: this.timeObj.startData,
        edhm: this.timeObj.endData,
        method: this.firstTableActive + 1,
        type: 'ZbkhStationEXTJ'
      }
      const { data } = await this.$PostRequest('TollStationFlow/gantry1', fd(params))
      data.data.title.unshift({ key: 'name', value: '' })
      this.tableHeader = data.data.title
      this.tableData = data.data.data
    },
    percentage(value) {
      if (isNaN(value)) {
        return value
      }
      return value + '%'
    },
    async requestData1() {
      const params = {
        sdhm: this.timeObj.startData.replace(/\-/g, ''),
        edhm: this.timeObj.endData.replace(/\-/g, ''),
        method: this.firstTableActive1 + 1,
      }
      const { data } = await this.$PostRequest('/GetSJtraf/detail', fd(params))
      this.tableData1 = data.data
    },
    changeActive(index) {
      this.isActive = index
      this.$store.commit('SETFIRSTTABLEACTIVE', index)
    },
    changeActive1(index) {
      this.isActive1 = index
      this.$store.commit('SETFIRSTTABLEACTIVE1', index)
    },
    setStyle({ row, column, rowIndex, columnIndex }) {
      if (column.label === '排序') {
        return { 'text-align': 'center', 'background': '#CCE5D9', color: '#3D3D3D', 'border-radius': '8px 0 0 0', fontWeight: 'normal !important'  }
      }
      return { 'text-align': 'center', 'background': '#CCE5D9', color: '#3D3D3D', fontWeight: 'normal !important' }
    },
    setStyle1({ row, column, rowIndex, columnIndex }) {
      return { 'text-align': 'center', 'background': '#CCE5D9', color: '#3D3D3D', fontWeight: 'normal !important' }
    },
    getWidth(item) {
      if (item == 'number') {
        return '28px'
      }
       if (item == 'name') {
        return '70px'
      }
      return '80px'
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-table .cell,
.el-table--border td:first-child .cell {
  padding: 0 !important;
}

/deep/ .el-table th .cell {
  font-family: PingFangSC-Medium, PingFang SC;
  padding: 0;
}

.tableBox /deep/ .el-table__row:nth-of-type(11) {
  /*font-size: 0.24rem;*/
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: #333333;
}

.tableBox1 /deep/ .el-table__row:nth-of-type(1) {
  /*font-size: 0.24rem;*/
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 700;
  color: #333333;
}


/deep/ .el-table td {
  border-bottom: 0;
}

/deep/ .el-table__row {
  font-weight: 400;
}

/deep/ .el-table .cell span {
  font-family: PingFangSC-Regular, PingFang SC;
}

/deep/ .el-table .cell {
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 0;
}

/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #EDF6F2 !important;
}

.custable {
  padding: 0.3rem 0rem;

  // margin-top: 2rem;
  .second-title {
    font-size: 0.36rem;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 600;
    color: #3D3D3D;
    line-height: 0.54rem;
  }

  .tab {
    display: flex;
    margin: 0.28rem 0;

    .tab-item {
      margin: 0 0.28rem 0 0;
      width: 1.6rem;
      height: 0.54rem;
      background: #F3F4F5;
      border-radius: 0.08rem;
      font-size: 0.28rem;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #333333;
      line-height: 0.4rem;
      display: flex;
      align-items: center;
      justify-content: center;

      &.active {
        color: #4375C9;
        background: #EEF4FE;
        border: 0.02rem solid #4375C9;
      }
    }
  }

  .tableBox {
    border-radius: 8px 0 0 0;
    overflow: hidden !important;
    margin: 0.3rem 0;

    .shaw {
      /deep/ .el-table__row:nth-of-type(1) {
        /*font-size: 0.24rem;*/
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 700;
        color: #333333;
      }
    }

    /deep/ .el-table td {
      padding: 8px 0;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      /*font-weight: 400;*/
      color: #3D3D3D;
      line-height: 0.34rem;
    }

    /deep/ .el-table /deep/ .cell {
      font-family: PingFangSC-Regular, PingFang SC !important;
    }
  }

  .tableBox /deep/ .el-table th {
    padding: 18px 0;
  }

  /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #F0F5FA;
  }

  .tableBox /deep/ .el-table th:nth-of-type(1):before {
    content: '入省';
    text-align: center;
    position: absolute;
    width: 152px;
    height: 1px;
    bottom: 21px;
    right: -21px;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .tableBox /deep/ .el-table th:nth-of-type(1):after {
    content: '出省';
    text-align: center;
    position: absolute;
    width: 152px;
    top: 4px;
    left: -18px;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .tableBox /deep/ .el-table th:nth-of-type(1) .cell {
    position: absolute;
    top: 0;
    left: 0;
    width: 98px;
    height: 1px;
    background-color: #EBEEF5;
    display: block;
    text-align: center;
    transform: rotate(36deg);
    transform-origin: top left;
    -ms-transform: rotate(36deg);
    -ms-transform-origin: top left;
    -webkit-transform: rotate(36deg);
    -webkit-transform-origin: top left;
  }
}

.tableBox1 /deep/ .el-table th {
  padding: 4px 0 !important;
}

.tableBox1 /deep/ .el-table td {
  padding: 8px 0;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  /*font-weight: 400;*/
  color: #3D3D3D;
  line-height: 0.34rem;
}
</style>
